<template>
	<view v-if="showFlag">
		<view class="list borderBottom1">
			<view class="teachersDetails" style="border: none;">
				<view class="teacherImg" style="width: 130rpx;height: 130rpx;"><image style="width: 130rpx;height: 130rpx;" :src="detail.image" mode=""></image></view>

				<view class="introduce">
					<view class="teacherName" style="margin-bottom: 10rpx;">
						<text>{{ detail.name }}</text>
						<text>{{ detail.drive_age ? '驾龄' + detail.drive_age + '年' : '' }}</text>
					</view>

					<view class="teacher_phone" @click="callTeacher">{{detail.phone || '暂无'}}</view>

					<view class="skillList" style="margin-top: 10rpx;">
						<view class="characteristic" v-for="(ele, index1) in detail.tags" :key="'a' + index1">{{ ele }}</view>
					</view>
				</view>

				<view @click="collectionHandle(1)" class="collection">
					<image class="collectionIcon" v-if="state == 1" src="../../static/img/teacherDetails/isCollection.png" mode=""></image>
					<image class="collectionIcon" v-else src="../../static/img/teacherDetails/isCollection1.png" mode=""></image>
					<view v-if="state == 0">收藏</view>
					<view v-else>已收藏</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="container ">
				<view class="train borderBottom10">
					<view class="train_left">
						<view class="blueBot"></view>
						<text>车辆信息</text>
					</view>
				</view>
			</view>

			<view class="container borderBottom1">
				<view class="carType">
					<text class="carType_car">车辆型号</text>
					<text class="carType_quan">{{ detail.car_model }}</text>
				</view>
			</view>
			<view class="container borderBottom1">
				<view class="carType">
					<text class="carType_car" style="margin-right: 30rpx;">车牌号</text>
					<text class="carType_quan">{{ detail.car_number }}</text>
				</view>
			</view>
			<view class="container borderBottom1">
				<view class="carType">
					<text class="carType_car" style="margin-right: 39rpx;">车检信息</text>
					<text class="carType_quan">{{ detail.car_check }}</text>
				</view>
			</view>
			<view class="container borderBottom10" style="padding-bottom: 88rpx;">
				<view class="carType"><text class="carType_car" style="margin-right: 39rpx;">车辆照片</text></view>
				<!-- 轮播 -->
				<swiper
					class="swiper"
					indicator-color="rgba(255, 255, 255, 0.6)"
					indicator-active-color="rgba(255, 255, 255, 1)"
					@animationfinish="animationChange"
					:circular="true"
					:autoplay="true"
					:interval="3000"
					:duration="1000"
					:current="swiperCurrent"
				>
					<swiper-item @click="perviewImg(item, index)" v-for="(item, index) in detail.car_images" :key="'img' + index">
						<image class="swiper-item" :src="item" mode=""></image>
					</swiper-item>
				</swiper>
				<!-- 轮播指示点样式修改 -->
				<!-- <view class="dots">
					<block v-for="(item, index) in detail.car_images.length" :key="'dots' + index"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
				</view> -->
			</view>
		</view>
		<view class="timeSlot">
			<view class="train borderBottom10">
				<view class="train_left">
					<view class="blueBot"></view>
					<text>可约时间段</text>
				</view>
			</view>
			<scroll-view scroll-x="true" class="miaosha-list" @scroll-with-animation="true" :scroll-left="scrollLeft">
				<view @click="currentChange(index)" class="miaosha-item" v-for="(item, index) in dateList" :key="'c' + index" :class="index == currentIndex ? 'select' : ''">
					<view class="">{{ item.date }}</view>
					<view class="">{{ item.week }}</view>
					<view class="blueLine" v-if="index == currentIndex"></view>
				</view>
			</scroll-view>
			<text class="iconfont rightIcon">&#xe79a;</text>
			<view class="train borderBottom1">
				<view class="train_left">
					<!-- <view class="blueBot"></view> -->
					<text>上午</text>
				</view>
			</view>
			<view class="seatNumber borderBottom10" style="background-color: #FFFFFF;">
				<view v-if="dateList[currentIndex].subject[0].title === '科目二'">
					<view class="" v-if="detail.cartype == 1">科目二：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目二</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时长' }}：{{ dateList[currentIndex].subject[0].amyunumber || dateList[currentIndex].subject[0].amclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].amyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(0, 0, dateList[currentIndex].subject[0].amyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].amyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
				<view v-if="dateList[currentIndex].subject[0].title === '科目三'">
					<view class="" v-if="detail.cartype == 1">科目三：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目三</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时长' }}：{{ dateList[currentIndex].subject[0].amyunumber || dateList[currentIndex].subject[0].amclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].amyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(1, 0, dateList[currentIndex].subject[0].amyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].amyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
			</view>
			<view class="train borderBottom1">
				<view class="train_left" style="display: flex;padding: 10rpx 0;align-items: center;">
					<!-- <view style="margin-right: 20rpx;margin-left: 10rpx;" class="blueBot"></view> -->
					<text>下午</text>
				</view>
			</view>
			<view class="seatNumber borderBottom10" style="background-color: #FFFFFF;">
				<view v-if="dateList[currentIndex].subject[0].title === '科目二'">
					<view class="" v-if="detail.cartype == 1">科目二：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目二</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时长' }}：{{ dateList[currentIndex].subject[0].pmyunumber || dateList[currentIndex].subject[0].pmclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(0, 1, dateList[currentIndex].subject[0].pmyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
				<view v-if="dateList[currentIndex].subject[0].title === '科目三'">
					<view class="" v-if="detail.cartype == 1">科目三：{{ dateList[currentIndex].subject[0].laplength }}分钟</view>
					<view class="" v-else="detail.cartype == 1">科目三</view>
					<view class="">{{ detail.cartype == 1 ? '单圈价格' : '课时价格' }}：{{ dateList[currentIndex].subject[0].price }}</view>
					<view class="">
						{{ detail.cartype == 1 ? '剩余圈数' : '剩余时长' }}：{{ dateList[currentIndex].subject[0].pmyunumber || dateList[currentIndex].subject[0].pmclasshour }}
					</view>
					<view
						class="immediatelyOrder"
						:class="dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? 'grayBg' : ''"
						@click="yuyueHandle(1, 1, dateList[currentIndex].subject[0].pmyuyuestatus)"
					>
						{{ dateList[currentIndex].subject[0].pmyuyuestatus == 0 ? '不可预约' : '立即预约' }}
					</view>
				</view>
			</view>
			<view class="train borderBottom1">
				<view class="train_left">
					<view class="blueBot"></view>
					<text>场地信息</text>
				</view>
			</view>
			<view class="fieldMsg">
				<view class="fieldMsg_area">
					<text>位置</text>
					<view class="" @tap="openMap">
						<image src="../../static/img/teacherDetails/address.png" mode=""></image>
						<text>{{ area.school_name }}</text>
					</view>
				</view>
				<view class="fieldMsg_time">
					<text>营业时间</text>
					<view class="">
						<image src="../../static/img/teacherDetails/time.png" mode=""></image>
						<text>{{ area.openingtime }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="footer"><view class="" @click="submitOrder">立即预约</view></view> -->
	</view>
</template>

<script>
import { teacherDetail, collectCoach } from '@/api/user/teacherList/teacherList.js';
export default {
	data() {
		return {
			showFlag: false,
			state: 0,
			swiperCurrent: 0,
			scrollLeft: 0,
			swiperImg: [
				// 'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
				// 'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
				// 'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
				// 'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg',
				// 'https://s1.ax1x.com/2020/03/24/8qNhWT.jpg'
			],
			tabList: [
				{
					date: '2.19',
					week: '周一',
					second: '20',
					price: '90',
					yu: '20',
					third: '30',
					price1: '100',
					yu1: '10'
				}
			],
			currentIndex: 0,
			area: {
				latitude: 30.595556,
				longitude: 104.063323,
				name: '成都市武侯区蜀安驾校场地',
				address: '成都市武侯区蜀安驾校场地'
			},
			dateList: [],
			detail: {}, //教练详情
			subjects: [] ,//科目详情
			type:1,
		};
	},
	async onLoad(options) {
		this.type=options.type
		let res = await teacherDetail(options.id);
		res.data.coach.tags = res.data.coach.tags.split(',');
		res.data.coach.car_images = res.data.coach.car_images.split(',');
		res.data.changdi.lnglat = JSON.parse(res.data.changdi.lnglat);
		this.area = res.data.changdi;
		this.dateList = res.data.calendar;
		this.detail = res.data.coach;
		this.subjects = res.data.subjects;
		this.state = res.data.collect;
		this.showFlag = true;
	},
	methods: {
		async collectionHandle() {
			let res = await collectCoach(this.detail.id);
			if (res.msg == '收藏成功') {
				this.state = 1;
				uni.showToast({
					title: '收藏成功！'
				});
			} else if (res.msg == '取消收藏成功') {
				this.state = 0;
				uni.showToast({
					title: '已取消收藏！',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '请退出重试！',
					icon: 'none'
				});
			}
		},
		openMap() {
			uni.openLocation({
				latitude: this.area.lnglat.lat,
				longitude: this.area.lnglat.lng,
				name: this.area.school_name,
				address: this.area.school_name,
				success: function() {
					console.log('success');
				},
				fail: () => {
					console.log('fail');
				}
			});
		},
		yuyueHandle(item, index, status) {
			if (status == 1) {
				if(this.type==1){
					if (item == 0) {
						if (index == 0) {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/teacherSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=0&date=' +
									this.dateList[this.currentIndex].date
							});
						} else {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/teacherSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=1&date=' +
									this.dateList[this.currentIndex].date
							});
						}
					} else {
						if (index == 0) {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/teacherSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=0&date=' +
									this.dateList[this.currentIndex].date
							});
						} else {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/teacherSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=1&date=' +
									this.dateList[this.currentIndex].date
							});
						}
					}
				}else{
					if (item == 0) {
						if (index == 0) {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/testSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=0&date=' +
									this.dateList[this.currentIndex].date
							});
						} else {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/testSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=1&date=' +
									this.dateList[this.currentIndex].date
							});
						}
					} else {
						if (index == 0) {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/testSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=0&date=' +
									this.dateList[this.currentIndex].date
							});
						} else {
							uni.navigateTo({
								url:
									'/pages/teacherSubscribe/testSubscribe?teacher=' +
									JSON.stringify(this.detail) +
									'&lesson=' +
									JSON.stringify(this.dateList[this.currentIndex].subject[0]) +
									'&time=1&date=' +
									this.dateList[this.currentIndex].date
							});
						}
					}
				}
				
			} else {
				uni.showToast({
					title: '暂不可预约',
					icon: 'none'
				});
			}
		},
		currentChange(index) {
			this.currentIndex = index;
		},
		// selectDate() {
		// 	if (this.currentIndex < this.dateList.length - 1) {
		// 		console.log(this.currentIndex);
		// 		this.currentIndex += 1;
		// 		if (this.currentIndex % 6==0) {
		// 			this.scrollLeft += 360;
		// 		}
		// 	}
		// },
		animationChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		perviewImg(item, index) {
			let urls = [];
			this.detail.car_images.forEach(item => {
				urls.push(item);
			});
			uni.previewImage({
				urls: urls,
				current: urls[index],
				indicator: 'number',
				loop: true,
				success() {}
			});
		},
		submitOrder() {
			//选择教练
			uni.navigateTo({
				url: '/pages/teacherSubscribe/teacherSubscribe?teacher=' + JSON.stringify(this.detail)
			});
		},
		callTeacher() {
			uni.makePhoneCall({
				phoneNumber: '13438020605' //仅为示例
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/pages/tabbar/index/css/index.scss';
@import './css/teacherDetail.scss';
</style>
